<template>
    <div id="app" class="with-bar recommend" :class="{'page-loading':page.loading || initLoading}">
        <ui-loading v-if="initLoading" class="page-init-loading">
             <div slot="content"></div>
        </ui-loading>
         <scroll-fixed>
            <page-bar>
                <div slot="left"></div>
                <div slot="middle" class="header">
                    推荐
                </div>
                <div slot="right"></div>
            </page-bar>
        </scroll-fixed>
        
        <ui-loading v-if="page.loading" />
        <page-error v-else-if="page.is_end && news.list.length == 0">
            <div slot="logo">
                <img src="../assets/page-empty.png" class="logo">
            </div>
            <div slot="text">
                <p class="text">暂无内容</p>
            </div>
        </page-error>
        <page-error v-else-if="pageError" @refresh="pageRefresh"></page-error>
        <scroll-list :disabled="true" class="ui-list" ref="scroll" v-else :config="scroll" @pull="pullLoad" @bottom="loadmore">
            <transition-group name="list" tag="div">
                <ui-item v-for="(item,index) in news.list" :item="item" :key="item.type + '' +item.id" :params="player" 
                @playVideo="playVideo"
                @volumechange="volumeChange"
                @close="removeItem(...arguments,index)"></ui-item>
            </transition-group>
        </scroll-list><!-- en dui-list -->

        <offline :withbar="true"/>
        <ui-tab-bar :active="page.tabBarActive" @change="tabChange"></ui-tab-bar>
        <popup-unlike ref="unlike"></popup-unlike>
        <slide-tool ref="slide" />
    </div>
</template>
<script>
import Items from '../components/items.vue'
import ScrollList from '../components/scrollList.vue'
import pageBar from '../components/pagebar.vue'
import scrollFixed from '../components/scrollFixed.vue'

import pageError from '../components/pageError.vue'
import offline from '../components/offline.vue'
import UILoading from '../components/loading.vue'

import mxTabBar from '../mixins/tabbar.js'
import mxPlayer from '../mixins/inlinePlayer.js'
import mxSlide from "../mixins/slide.js";
import mxunlike from "../mixins/unlikebox.js";
export default {
    name:'recommend',
    data(){
        return {
            page:{
                tabBarActive:2,
                is_end:false,//是否已经没有数据
                page_no:1,
                channel_id:'',
                country_short_name:'',
                loading:true,
                area:{}
            },
            pageError:false,
            initLoading:true,
            news:{
                list:[],
            },
            scroll:{
                pull:false,
                bottom:false,
            }
        }
    },
    mixins: [mxTabBar,mxPlayer,mxSlide,mxunlike],
    components:{
        [Items.name]:Items,
        [pageBar.name]:pageBar,
        [scrollFixed.name]:scrollFixed,
        [ScrollList.name]:ScrollList,
        [offline.name]:offline,
        [UILoading.name]:UILoading,
        [pageError.name]:pageError,
    },
    mounted(){
        // let area = this.$utils.caches.get('area');
        // try{
        //     area = JSON.parse(area);
        //     this.page.area = area;
        //     this.page.country_short_name = area.short_name;
        // }catch(e){}

        this.$on("RELOADDATA",type=>{
            this.$emit('PLYAER_CLOSE');
            this.page.page_no = 1;
            this.page.loading = true;
            this.page.is_end = false;

            this.loadPageData(true,false,type).then(rs=>{
                this.$nextTick(() => {
                    this.scroll.bottom = this.news.list.length == 0 ? 'hidden' : (this.page.is_end ? 'done' : false);
                });
            }).catch(e=>{
                this.pageError = true;
            }).finally(()=>{
                this.$nextTick(()=>{
                    this.initLoading = false;
                    this.page.loading = false;
                })
            })
        });

        this.$emit('RELOADDATA');
    },
    methods:{
        loadPageData(needClean = false,isUnshift = false,loadPageData = false){
            let url ,params = {
                page_no:this.page.page_no
                // is_recom:1,
            }

            // if(this.page.channel_id !== ''){
            //     params.channel_id = this.page.channel_id
            // }

            // if(this.page.country_short_name !== ''){
            //     params.country_short_name = this.page.country_short_name;
            // }

            if(loadPageData!= "isRefresh"){
                params.action='refresh';
            }

            url = '?ct=news&ac=recommend_list';
         
            return  this.$http.get(url,{params}).then(response=>{
                let {data} = response;
                if(needClean) this.news.list = [],document.body.scrollTop = 0;
                if(data.code == 0){
                    this.page.is_end = !data.data.is_have_data;
                    let list = [];
                    data.data.list && data.data.list.forEach && data.data.list.forEach(item=>{
                        if(this.$utils.unlike.check(item.id)) return;
                        let tmpItem = item
                        if(item.style_num == 6){//热点新闻
                             tmpItem.url = this.$config.pages.hot;
                             tmpItem.type = 'hot-list';
                             let childList = [];
                             item.list.forEach(child=>{
                                 if(this.$utils.unlike.check(child.id)) return;
                                 let citem  = child;
                                 citem.type = child.type == 3 ? '专题' : '';
                                 citem.url = child.detail_url;
                                 citem.source = child.source;
                                 citem.view = child.browse_total;
                                 citem.time = this.$moment(child.issue_time  * 1000).fromNow().replace(' ','');
                                 citem.src = child.cover_img[0];
                                 childList.push(citem)
                             })
                             tmpItem.list = childList
                        }else{
                            tmpItem = item;
                            tmpItem.url = item.detail_url;
                            tmpItem.type = (()=>{
                                switch(item.style_num){
                                    case 1:
                                        return 'special';
                                    case 2:
                                        return 'normal';
                                    case 3:
                                        return 'grid';
                                    case 4:
                                        return 'video';
                                    case 5:
                                        return 'single';
                                }
                            })();
                            if(tmpItem.type !== 'grid'){
                                tmpItem.src = item.cover_img[0];
                            }else{
                                tmpItem.src = item.cover_img;
                            }

                            if(tmpItem.type == 'video'){
                                tmpItem.play_status = 0;
                            }

                            tmpItem.view = item.browse_total;
                            tmpItem.time = this.$moment(item.issue_time * 1000).fromNow().replace(' ','');
                            if(item.style_num != 1){
                                tmpItem.close = true;
                            }
                        }
                        list.push(tmpItem)
                    })

                    if(!needClean){
                        if(isUnshift){
                            let savelist = [];
                            this.news.list.forEach(item=>{
                                // if(item.is_top !== 1 && item.is_hot !==1){
                                    item.is_top = 0;
                                    item.is_hot = 0;
                                    savelist.push(item); 
                                // }
                            })
                            this.news.list = list.concat(savelist);
                            return data.data.count
                        }else{
                            let savelist = [];
                            list.forEach(item=>{
                                // if(item.is_top !== 1 && item.is_hot !==1){
                                    item.is_top = 0;
                                    item.is_hot = 0;
                                    savelist.push(item); 
                                // }
                            })
                            this.news.list = this.news.list.concat(savelist);
                        }
                    }else{
                        list.forEach(item=>{
                            item.is_top = 0;
                            item.is_hot = 0;
                        })
                        this.news.list = list;
                    }
                    
                    this.page.page_no++;
                }else{
                    this.$toast(data.msg);
                }
            }).catch(err=>{
                window.$zEvent('ERROR',err);
                this.$toast(err);
            })
          
        },
        pullLoad(cb) {
            /**
             * 目前需求是点击刷新按钮，干掉现有列表，重新获取第一页的数据
             */
            this.$emit('RELOADDATA',"isRefresh");
            // this.loadPageData(false,true,"isRefresh").then((count)=>{
            //     // this.$nextTick(() => {
            //     //     this.$refs.scroll && this.$refs.scroll.$emit('refresh_done',count)
            //     //     cb()
            //     // });
            // })
        },
        loadmore(){
            if(this.scroll.bottom) return false;
            this.scroll.bottom = true;
            this.loadPageData("","","isRefresh").then(()=>{
                this.$nextTick(() => {
                    this.scroll.bottom = this.page.is_end ? 'done' : false;
                })
            })
        },
    }
}
</script>
<style lang="less">
.recommend {
    .page-bar {
        .header {
            font-size:36px;
            color:#282828;
        }
    }
}

</style>


